.q-pagination {
  --pagination-color-base: var(--color-primary-blue);
  --pagination-color-hover: var(--color-primary-black);
  --pagination-color-selected: var(--color-primary-black);
  --pagination-color-disabled: rgba(var(--color-rgb-gray), 0.64);
  --pagination-background-color-base: var(--color-tertiary-gray-light);
  --pagination-background-color-hover: var(--color-tertiary-gray);
  --pagination-background-color-selected: var(
    --color-tertiary-gray-ultra-light
  );
  --pagination-background-color-disabled: var(--color-tertiary-gray);
  --pagination-box-shadow-primary: -1px -1px 4px var(--color-tertiary-white),
    1px 1px 4px rgba(var(--color-rgb-blue), 0.4),
    4px 4px 8px rgba(var(--color-rgb-blue), 0.4),
    -4px -4px 8px rgba(var(--color-rgb-white), 0.25);
  --pagination-box-shadow-secondary: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
    1px 1px 3px rgba(var(--color-rgb-blue), 0.4);

  display: inline-grid;
  margin-top: 24px;
  white-space: nowrap;
  grid-gap: 8px;

  &__btn {
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-base);
    line-height: 40px;
    color: var(--pagination-color-base);
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background-color: var(--pagination-background-color-base);
    border: none;
    border-radius: var(--border-radius-base);
    box-shadow: var(--pagination-box-shadow-primary);
    grid-row: 1;

    &:hover,
    &:focus {
      color: var(--pagination-color-hover);
      background-color: var(--pagination-background-color-hover);
      outline: none;
    }

    &_quick {
      font-size: 24px;

      &::before {
        line-height: 40px;
      }

      .q-pagination_disabled &,
      &:not(:focus):not(:hover) {
        &::before {
          font-size: var(--font-size-base);
          content: '...';
        }
      }
    }

    &_icon {
      font-size: 24px;
    }

    &_active:not(:hover),
    &_active:not(:focus) {
      color: var(--pagination-color-selected);
      cursor: default;
      background-color: var(--pagination-background-color-selected);
      box-shadow: var(--pagination-box-shadow-secondary);
    }

    &.q-pagination__btn_disabled,
    .q-pagination_disabled & {
      color: var(--pagination-color-disabled);
      cursor: not-allowed;
      background-color: var(--pagination-background-color-disabled);
      box-shadow: var(--pagination-box-shadow-secondary);
    }
  }
}
